import 'package:flutter/material.dart';
import 'package:flutter_widget/custom/custom_appbar.dart';

// ignore: must_be_immutable
class TabPage extends StatefulWidget {
  String name;
  TabPage({Key? key, required this.name}) : super(key: key);

  @override
  _TabPageState createState() => _TabPageState();
}

class _TabPageState extends State<TabPage> with SingleTickerProviderStateMixin {
  late TabController tabController;

  @override
  void initState() {
    super.initState();
    tabController = TabController(length: 9, vsync: this);
    tabController.addListener(
      () {
        // ignore: avoid_print
        print('当前选定的选项卡下标为:' + tabController.index.toString());
      },
    );
  }

  @override
  // ignore: must_call_super
  void dispose() {
    tabController.dispose(); // tabController销毁
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CustomAppbar(widget.name, Theme.of(context).primaryColor),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.gesture),
        onPressed: () {
          // ignore: avoid_print
          print('当前选定的选项卡下标为:' + tabController.index.toString());
        },
      ),
      body: DefaultTabController(
        // 标签数量
        length: 9,
        child: Column(children: [
          SizedBox(
              height: 60,
              child: TabBar(
                // 多个标签时滚动加载
                isScrollable: true,
                // 标签指示器的颜色
                indicatorColor: Colors.red,
                // 标签的颜色
                labelColor: Colors.blue,
                // 未选中标签的颜色
                unselectedLabelColor: Colors.black,
                // 指示器的大小
                indicatorSize: TabBarIndicatorSize.label,
                // 指示器的权重，即线条高度
                indicatorWeight: 4.0,
                controller: tabController,
                tabs: const <Widget>[
                  Tab(text: "热销"),
                  Tab(text: "推荐"),
                  Tab(text: "搞笑"),
                  Tab(text: "妙招"),
                  Tab(text: "关注"),
                  Tab(text: "时尚"),
                  Tab(text: "女性"),
                  Tab(text: "服装"),
                  Tab(text: "男性"),
                ],
              )),

          // 标签页所对应的页面
          SizedBox(
            height: 500,
            child: TabBarView(
              controller: tabController,
              children: <Widget>[
                ListView(children: const <Widget>[
                  ListTile(
                    title: Text("热销内容"),
                  ),
                ]),
                ListView(children: const <Widget>[
                  ListTile(
                    title: Text("推荐内容"),
                  ),
                ]),
                ListView(children: const <Widget>[
                  ListTile(
                    title: Text("搞笑内容"),
                  ),
                ]),
                ListView(children: const <Widget>[
                  ListTile(
                    title: Text("妙招内容"),
                  ),
                ]),
                ListView(children: const <Widget>[
                  ListTile(
                    title: Text("关注内容"),
                  ),
                ]),
                ListView(children: const <Widget>[
                  ListTile(
                    title: Text("时尚内容"),
                  ),
                ]),
                ListView(children: const <Widget>[
                  ListTile(
                    title: Text("女性内容"),
                  ),
                ]),
                ListView(children: const <Widget>[
                  ListTile(
                    title: Text("服装内容"),
                  ),
                ]),
                ListView(children: const <Widget>[
                  ListTile(
                    title: Text("男性内容"),
                  ),
                ]),
              ],
            ),
          ),
        ]),
      ),
    );
  }
}
